
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="address=no">
    <title>detail</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="css/libs/idangerous.swiper.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="js/libs/hotcss.js"></script>
</head>
<body>
<div class="wrap">
    <header id="nav">
        <div id="fixtop">
            <div class="back fr">
                <a href="javascript:window.history.go(-1)" class="btn btn-right">
                    <i class="iconfont">&#xe61a;</i>
                </a>
            </div>
            <div class="back fl">
                <a href="javascript:;" class="btn btn-left">
                    <i class="iconfont">&#xe672;</i>
                    <span class="badge">1</span>
                </a>
            </div>
            <div class="center">这里填写什么呢</div>
            <div class="clearfix"></div>
        </div>
    </header>
    <section class="header">
        <div class="slider">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"> <img src="images/slider1-1.png"> </div>
                    <div class="swiper-slide"> <img src="images/slider1-2.png"> </div>
                </div>
            </div>
            <div class="pagination"></div>
        </div>
        <div class="about borB">
            <div class="title overhidden">非常非常性感的女装</div>
            <div class="price">
                <span class="d-price col_ff0b0b">$24.99</span>
                <span class="o-price">
                    <del>$40.99</del>
                </span>
                <span class="percent col_ff0b0b">39% 折扣</span>
            </div>
        </div>
        <div class="support">
            <div class="panel left">
                <ul>
                    <li>支持货到付款</li>
                    <li>订单满$100免邮费</li>
                    <li>收到货后9天无理由退换货</li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </section>

    <section class="spec">
        <div class="sec borB">
            <h1>详情</h1>
            <ul class="sku">
                <li>类别: 夹克,棉衣</li>
                <li>门襟: 拉链</li>
                <li>袖长: 长袖</li>
                <li>图案: 字母</li>
                <li>材质: 涤纶</li>
                <li>领型: 旗袍领</li>
            </ul>
            <div class="NO">商品编号:akhkja1oi23k1jb23kj</div>
        </div>
        <!--<div class="sec">-->
            <!--<h1 class="slide" data-stu="0">كم يوما يكون حوضك؟ <i class="iconfont fl">&#xe6a1;</i></h1>-->
            <!--<div class="size">-->
                <!--<img src="src/images/size1.jpg" alt="size">-->
                <!--<img src="src/images/size2.jpg" alt="size">-->
            <!--</div>-->
        <!--</div>-->
    </section>

    <section class="more-pic">
        <div class="pic-item">
            <img src="images/blank.gif" data-echo="images/clothe.jpg" alt="clothe">
        </div>
        <div class="pic-item">
            <img src="images/blank.gif" data-echo="images/clothe.jpg" alt="clothe">
        </div>
        <div class="pic-item">
            <img src="images/blank.gif" data-echo="images/clothe.jpg" alt="clothe">
        </div>
        <div class="pic-item">
            <img src="images/blank.gif" data-echo="mages/clothe.jpg" alt="clothe">
        </div>
        <div class="pic-item">
            <img src="images/blank.gif" data-echo="images/clothe.jpg" alt="clothe">
        </div>
        <div class="pic-item">
            <img src="images/blank.gif" data-echo="images/clothe.jpg" alt="clothe">
        </div>
        <div class="pic-item">
            <img src="images/blank.gif" data-echo="images/clothe.jpg" alt="clothe">
        </div>

    </section>
    <footer class="footer">
        <a href="javascript:;" class="j-addCart">加入购物车</a>
    </footer>
    <div class="select-box back_w">
        <!--商品缩略图等信息-->
        <div class="goods-box ">
            <a href="javascript:;" class="close col_4a4a4a">
                <i class="iconfont">&#xe608;</i>
            </a>
            <div class="goods-pic">
                <img src="images/clothe.jpg" class="thumb" alt="thumb">
            </div>
            <div class="goods-info">
                <ul>
                    <li class="col_ff0b0b">$37.99 19% 折扣</li>
                    <li><del>46.99</del></li>
                    <li class="tip ">请选择颜色尺寸</li>
                </ul>
            </div>
        </div>
        <!--款式 S-->
        <div class="style-box ">
            <h1>颜色</h1>
            <ul>
                <!--data-src 选择修改上面的图片-->
                <li class="color"  data-src="">红</li>
                <li class="color">黄</li>
                <li class="color">蓝</li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <!--款式 E-->
        <!--尺寸 S-->
        <div class="style-box ">
            <h1>尺寸 <a href="javascript:;" class="size-help fl"><i class="iconfont">&#xe65e;</i> 尺寸指南</a></h1>
            <ul>
                <!--选中修改 goods-info中的tip-->
                <li class="size" data-size="XL">XL</li>
                <li class="size">L</li>
                <li class="size">M</li>
                <li class="size">S</li>
                <li class="size">XS</li>
            </ul>
            <div class="clearfix"></div>
        </div>
        <!--尺寸 E-->
        <!--数量 S-->
        <div class="count-box">
            <h1>数量</h1>
            <div class="operate clearfix">
                <a href="javascript:;" class="fr reduce"> <i class="iconfont">&#xe67f;</i> </a>
                <input class="fr item-count" type="text" value="1" disabled />
                <a href="javascript:;" class="fr add"> <i class="iconfont">&#xe600;</i></a>
            </div>
        </div>
        <!--数量 E-->
        <a href="javascript:;" id="submit-order">提交</a>
    </div>
    <div class="shadow"></div>
</div>

<script src="js/libs/jquery-1.11.1.min.js"></script>
<script src="js/libs/idangerous.swiper.min.js"></script>
<script src="js/libs/echo.min.js"></script>
<script src="js/common.js"></script>
<script>

    $(function () {
        Echo.init({
            offset: 100,
            throttle: 0
        });
        var mySwiper = $('.swiper-container').swiper({
            pagination: '.pagination',
            loop:true,
            grabCursor: true,
            paginationClickable: true
        });
//        $(".slide").click(function () {
//            var stu = $(this).attr('data-stu');
//            $(this).next().stop().slideToggle();
//            $(this).find('i').css({"transform": stu == 0 ? 'rotate(90deg)' : 'rotate(0)'});
//            $(this).attr('data-stu', stu == 0 ? 1 : 0);
//        });

        new Hammer( $( ".j-addCart" )[ 0 ], {
            domEvents: true
        } );
        new Hammer( $( ".shadow" )[ 0 ], {
            domEvents: true
        } );
        new Hammer( $( ".select-box .close" )[ 0 ], {
            domEvents: true
        } );
        var colors = $(".select-box").find('.color');
        colors.each(function (index,val) {
            new Hammer( colors[index], {
                domEvents: true
            } );
        });
        var size = $( ".select-box" ).find('.size');
        size.each(function (index,val) {
            new Hammer( size[index], {
                domEvents: true
            } );
        });

        new Hammer( $( ".add" )[ 0 ], {
            domEvents: true
        } );
        new Hammer( $( ".reduce" )[ 0 ], {
            domEvents: true
        } );
        $(".j-addCart").click(function (e) {
            e.preventDefault();
            Arabic.toggleSelectBox(true)
        });

        $('.shadow,.select-box .close').on('tap',function () {
            Arabic.toggleSelectBox(false)
        });
        $('.select-box .color').on('tap',function () {
            $(this).toggleClass('active').siblings().removeClass('active');
        });
        $('.select-box .size').on('tap',function () {
            $(this).toggleClass('active').siblings().removeClass('active');
        });
        $(".reduce").on('tap',function () {
            var count = parseInt($(".item-count").val());
            if(count>1){
                $('.item-count').val(count-1);
            }
        });
        $(".add").on('tap',function () {
            var count = parseInt($(".item-count").val());
            $('.item-count').val(count+1);

        });
    })
</script>
</body>
</html>